<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat with AI</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .chat-container {
            display: flex;
            flex-direction: column;
            max-width: 800px;
            height: 500px;
            /*margin: 0 auto;*/
            padding: 20px;
            background-color: rgba(241, 245, 249);
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            margin-left:120px;
        }
        .message-container {
            margin-bottom: 10px;
            display: flex;
            justify-content: flex-end;
        }
        .message {
            padding: 10px;
            border-radius: 6px;
            max-width: 80%;
            word-wrap: break-word;
            margin-bottom: 5px;
        }
        .question {
            background-color: rgb(224, 223, 255);
            align-self: flex-end;
        }
        .response {
            background-color: #ccffcc;
            align-self: flex-start;
        }
        input[type="text"] {
            width: calc(100% - 80px);
            padding: 10px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            border: none;
            background-color: #007bff;
            color: white;
            font-weight: bold;
            border-radius: 4px;
            cursor: pointer;
        }
        .m1{

        }
    </style>
</head>
<body>
<h1 style="margin-left: 22%">看房AI助手</h1>
<div style="display:flex">
    <div>
        <div class="chat-container" id="chatContainer">
            <!-- Chat messages will be appended here -->
        </div>
        <div style="display:flex;">
            <input  style="width:750px;margin-left:14.5%" type="text" id="question" placeholder="请输入您的问题" onkeydown="if(event.keyCode===13) askQuestion()" >
            <button style="margin-left:-15px;width:100px" onclick="askQuestion()">发送</button>
        </div>

    </div>

    <div>
        <div style="position: relative;top: 80px;left: 170px;font-size: 25px;color: #000000;">使用微信公众号，获取更多优质服务，结果更准确！</div>
        <img style="width:600px;margin-top:100px;margin-left: 170px"  src="../icon/微信公众号.png">
    </div>
</div>


<script>
    const token = localStorage.getItem('token');

    async function askQuestion() {
        const questionInput = document.getElementById('question');
        const question = questionInput.value.trim();

        if (!question) {
            return;
        }

        const chatContainer = document.getElementById('chatContainer');

        // User question
        const questionElement = document.createElement('div');
        questionElement.classList.add('message', 'question');
        questionElement.textContent = question;
        chatContainer.appendChild(questionElement);

        // AI response
        const responseElement = document.createElement('div');
        responseElement.classList.add('message', 'response');
        responseElement.textContent = '正在回答中...';
        chatContainer.appendChild(responseElement);

        try {
            const response = await fetch(`http://localhost:8080/largeModel?input=${encodeURIComponent(question)}`,
                {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });
            const result = await response.json();

            if (result.code === 1) {
                responseElement.textContent = result.data.replace(/\\n/g, '\n');
            } else {
                responseElement.textContent = '请求失败: ' + result.msg;
            }
        } catch (error) {
            responseElement.textContent = '请求失败: ' + error.message;
        }

        questionInput.value = ''; // Clear input after sending
    }
</script>
</body>
</html>
